<template>
  <div>
    <el-button v-if="debug" @click="addPage">添加模块</el-button>
    <template v-for="(item, index) in componentList">
      <pageComponents :key="index" :component-name="item.componentName" :from-id="item.id" :pid="fromId" :debug="debug" :root-id="fromId" @deletePage="deletePage" @buildInDialog="buildInDialog"></pageComponents>
    </template>
    <el-dialog title="添加模块" :visible.sync="dialogFormVisible">
      <el-form :model="components">
        <el-form-item label="模块名称" :label-width="'100px'">
          <el-select
            v-model="name"
            filterable
            clearable
            placeholder="请选择模块名称"
          >
            <template v-for="(value,key,index) in components">
              <el-option
                :key="index"
                :label="value.name"
                :value="key"
              />
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="_addPage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import pageComponents from '@/views/auto-page/components/pageComponents';
import {
  xhrGetPageComponent, xhrSetComponent, xhrDeleteComponent
} from '@/api/page'

export default {
  name: 'TabPage',
  components: { pageComponents },
  props: {
    debug: { // 是否处于调试状态
      type: Boolean,
      default: false
    },
    fromId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      componentList: [],
      dialogFormVisible: false,
      name: null,
      components: {},
      configData: {}
    }
  },
  created() {
    this.components = pageComponents.components
    this.pageId = this.$route.meta.pageId
    this.loadPage()
  },
  methods: {
    loadPage: function() {
      for (const i in this.$route.meta.pageComponents) {
        if (this.$route.meta.pageComponents[i].pid === this.fromId) {
          this.componentList.push(this.$route.meta.pageComponents[i])
          this.configData = this.$route.meta.pageComponents[i].configData
          this.$route.meta.pageData[this.fromId] = {}
        }
      }
    },
    addPage: function() {
      this.dialogFormVisible = true
    },
    _addPage: function() {
      const data = {
        pageId: this.pageId, configData: JSON.stringify({ 'title': this.name }), componentName: this.name, pid: this.fromId
      }
      xhrSetComponent(data)
        .then(resp => {
          this.$message.success('添加成功')
          this.reloadPage(this.fromId)
          this.dialogFormVisible = false
        })
        .catch(err => {
          this.$message.error(err)
          this.dialogFormVisible = false
        })
    },
    reloadPage: function() {
      xhrGetPageComponent({ pageId: this.pageId })
        .then(resp => {
          for (const i in resp.data.list) {
            resp.data.list[i].configData = JSON.parse(resp.data.list[i].configData)
          }
          this.$route.meta['pageComponents'] = resp.data.list
          this.componentList = []
          this.loadPage()
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    deletePage: function(id) {
      this.$confirm('确认删除该组件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        xhrDeleteComponent({ componentId: id })
          .then(resp => {
            this.$message.success('删除成功')
            this.reloadPage(0)
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    buildInDialog(operation, row) {
      this.$emit("buildInDialog", operation, row)
    }
  }
}
</script>

<style scoped>

</style>
